import {
  AbstractAccordion,
  C20AllListing,
  Layout,
  UserSubPageBase,
} from "@/components";
import { EventTypes } from "@/data/pages/pagesTypes";
import { colors } from "@/data/shared/colors";
import { ItemListingCardShape } from "@/data/shared/entityShapes";
import { useUserInfo, getUserEvents } from "@/store/userDataContext";
import { useAuth } from "@/store/authContext";
import { View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import style from "./index.module.scss";

const eventTranslation: {
  [key in EventTypes]: string;
} = {
  course: "课程",
  talk: "讲座",
  exhibition: "展览",
};

const eventId: {
  [key in EventTypes]: number;
} = {
  course: 0,
  talk: 2,
  exhibition: 3,
};

export default function UserEventHistory() {
  const [eventType, setEventType] = useState<null | EventTypes>();
  const [eventData, setEventData] = useState<null | {
    past: ItemListingCardShape[];
    upcoming: ItemListingCardShape[];
  }>();
  const { userInfoState, dispatchUserDataAction } = useUserInfo();
  const { userData } = userInfoState;
  const { dispatchAuthAction } = useAuth();

  const { params } = useRouter();

  useEffect(() => {
    if (params.eventType) {
      setEventType(params.eventType as EventTypes);
    }
  }, []);

  useEffect(() => {
    if (eventType && userData) {
      getUserEvents(dispatchUserDataAction, userData!, {
        query: {
          mainType: eventId[eventType],
          limit: process.env.defaultPageSize!,
          page: 1,
        },
        authDispatch: dispatchAuthAction,
      });
    }
  }, [eventType]);

  useEffect(() => {
    if (eventType && userData) {
      setEventData(userData.userEvents[eventType]);
    }
  }, [userData?.userEvents]);

  return (
    <Layout>
      {eventData && eventType && (
        <UserSubPageBase
          title={`我的${eventTranslation[eventType]}`}
          scrollable
        >
          <View className={style["list-wrapper"]}>
            <AbstractAccordion
              title={`即将开始的${eventTranslation[eventType]} (${eventData.upcoming.length})`}
              bottomBorderColor={colors.colorGrey}
              notoSans
              defaultOpen
            >
              <C20AllListing
                cardList={eventData.upcoming.map((eventListingData: any) => ({
                  ...eventListingData,
                  grayedOut: !eventListingData.status,
                  eventType: eventListingData.mainType,
                  date: eventListingData.schedulingDate,
                  endTime: eventListingData.schedulingEndTime,
                  startTime: eventListingData.schedulingStartTime,
                  link: `pages/${eventType}-detail/index?id=${eventListingData.id}`,
                }))}
              />
            </AbstractAccordion>
            <AbstractAccordion
              title={`已完成的${eventTranslation[eventType]} (${eventData.past.length})`}
              bottomBorderColor={colors.colorGrey}
              notoSans
            >
              <C20AllListing
                cardList={eventData.past.map((eventListingData: any) => ({
                  ...eventListingData,
                  grayedOut: !eventListingData.status,
                  eventType: eventListingData.mainType,
                  date: eventListingData.schedulingDate,
                  endTime: eventListingData.schedulingEndTime,
                  startTime: eventListingData.schedulingStartTime,
                  link: `pages/${eventType}-detail/index?id=${eventListingData.id}`,
                }))}
              />
            </AbstractAccordion>
          </View>
        </UserSubPageBase>
      )}
    </Layout>
  );
}
